<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<title>CMS后台管理系统</title>

<!-- Bootstrap core CSS-->
<link href="/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom fonts for this template-->
<link href="/libs/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

<!-- Custom styles for this template-->
<link href="/libs/sb-admin/sb-admin.css" rel="stylesheet">

</head>

<body id="page-top">

	<!-- 后台管理系统顶部 -->
	<jsp:include page="_inc_top.jsp" />

	<div id="wrapper">

		<!-- 后台管理系统左部菜单 -->
		<jsp:include page="_inc_left.jsp" />

		<div id="content-wrapper">

			<div class="container-fluid">

				<!-- 面包屑 -->
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="/admin/home">后台首页</a></li>
					<li class="breadcrumb-item active">广告管理</li>
				</ol>

				<!-- Page Content -->
				<h1>广告管理</h1>

				<form>

					<a href="/slide/toAddSlide"><button type="button" class="btn btn-primary">添加</button></a>
				</form>

				<hr>
				<table class="table table-striped table-bordered table-hover">
					<thead>
						<tr class="info">
							<th width="15%">广告标题</th>
							<th width="20%">幻灯片图片</th>
							<th width="20%">访问地址</th>
							<th width="35%">操作</th>
						</tr>
					</thead>
					<tbody class="">
						<c:forEach items="${slides}" var="slide">
							<tr id="item_${slide.id}">
								<td>${slide.title}</td>
								<td><img alt="" src="${slide.picture}" width="50" height="50"></td>
								<td>${slide.url}</td>
								<td>
									<button type="button" class="updateBtn btn btn-success btn-sm" slideId="${slide.id}">编辑</button>
									<button type="button" class="removeBtn btn btn-success btn-sm" onclick="removeSlide(${slide.id});">删除</button>
							</tr>
						</c:forEach>
					</tbody>
				</table>
				<nav aria-label="Page navigation example">
					<ul class="pagination">
						<c:choose>
							<c:when test="${currentPage <= 1 }">
								<li class="page-item"><a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
								</a></li>
							</c:when>
							<c:otherwise>
								<li class="page-item"><a class="page-link" href="/admin/slides?pageNo=${currentPage-1 }" aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
								</a></li>
							</c:otherwise>
						</c:choose>

						<c:forEach begin="1" end="${pages}" var="pageNo">
							<%-- <c:choose>
								<c:when test="${currentPage == pageNo}">
									<li class="page-item"><a class="page-link" href="/admin/blogs?pageNo=1">${pageNo}</a></li>

								</c:when>
								<c:otherwise> --%>
							<li class="page-item"><a class="page-link" href="/admin/slides?pageNo=${pageNo}">${pageNo}</a></li>
							<%-- </c:otherwise>
							</c:choose> --%>
						</c:forEach>

						<c:choose>
							<c:when test="${currentPage >= pages }">
								<li class="page-item"><a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> <span class="sr-only">Next</span>
								</a></li>
							</c:when>
							<c:otherwise>
								<li class="page-item"><a class="page-link" href="/admin/blogs?pageNo=${currentPage+1}" aria-label="Next"> <span aria-hidden="true">&raquo;</span> <span class="sr-only">Next</span>
								</a></li>
							</c:otherwise>
						</c:choose>
					</ul>
				</nav>
			</div>
			<!-- /.container-fluid -->

			<!-- Sticky Footer -->
			<footer class="sticky-footer">
				<div class="container my-auto">
					<div class="copyright text-center my-auto">
						<span>Copyright © Your Website 2018</span>
					</div>
				</div>
			</footer>

		</div>
		<!-- /.content-wrapper -->

	</div>
	<!-- /#wrapper -->

	<!-- Scroll to Top Button-->
	<a class="scroll-to-top rounded" href="#page-top"> <i class="fas fa-angle-up"></i>
	</a>

	<!-- Logout Modal-->
	<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
					<button class="close" type="button" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
				</div>
				<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
				<div class="modal-footer">
					<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
					<a class="btn btn-primary" href="/user/login">Logout</a>
				</div>
			</div>
		</div>
	</div>

	<!-- Bootstrap core JavaScript-->
	<script src="/libs/jquery/jquery.min.js"></script>
	<script src="/libs/bootstrap/js/bootstrap.bundle.min.js"></script>

	<!-- Custom scripts for all pages-->
	<script src="/libs/sb-admin/sb-admin.min.js"></script>

	<script type="text/javascript">
	$(function() {

		$(".updateBtn").click(
				function() {
					location = "/slide/toEditslide?slideId="
							+ $(this).attr("slideId")
				});
	})
	function removeSlide(id){
			if(confirm("您是否要删除此广告？")){
				$.ajax({
					url:'/slide/removeSlide?id=' + id,
					type:'get',
					success:function(data){
						console.log(data);
						if(data.status){
							$("#item_" + id).remove();
						}else{
							alert(data.message);
						}
					}
				});
			}
			return false;
		}
	</script>

</body>

</html>
